import React,{useState} from "react";
import { Input } from "antd";
import { DownOutlined } from "@ant-design/icons";

import "./css/todo-input.less";

function TodoInput(props) {
  const [inputValue,setInputValue]=useState();
  const handlePressEnter = (e) => {
    props.handleAddArr(e);
    setInputValue("");
  };

  const handleClickLeft=()=>{
    props.handleClickTodoInputLeft();
  }

  const handleChangeTopInut=(e)=>{
    let value=e.target.value;
    setInputValue(value);
  }
  return (
    <div className="todo-input">
      <DownOutlined onClick={()=>handleClickLeft()}/>
      <Input
        value={inputValue}
        placeholder="What needs to be done?"
        bordered={false}
        onPressEnter={handlePressEnter}
        onChange={handleChangeTopInut}
      />
    </div>
  );
}
export default TodoInput;
